<script setup lang="ts">
// import { defineProps, defineEmits } from 'vue'
import { Icon } from 'vant'

interface Reference {
  title: string;
  url: string;
  content: string;
  [key: string]: any;
}

defineProps({
  show: Boolean,
  references: {
    type: Array as () => Reference[],
    default: () => []
  }
})

const emit = defineEmits(['update:show', 'select'])

const closePopup = () => {
  emit('update:show', false)
}

const selectReference = (reference: Reference) => {
  emit('select', reference)
}

const truncateText = (text: string, maxLength = 100) => {
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

const simplifyUrl = (url: string) => {
  try {
    const urlObj = new URL(url)
    return urlObj.hostname
  } catch (e) {
    return url
  }
}
</script>

<template>
  <van-popup :show="show" @update:show="(val) => emit('update:show', val)" position="bottom" round
    :style="{ maxHeight: '80%' }" class="reference-popup-container">
    <div class="reference-popup">
      <div class="reference-header">
        <div class="title">参考资料</div>
        <div class="close-btn" @click="closePopup">
          <Icon name="cross" />
        </div>
      </div>
      <div class="reference-list">
        <div v-for="(ref, index) in references" :key="index" class="reference-item" @click="selectReference(ref)">
          <div class="reference-title">
            <span class="index">{{ index + 1 }}</span>
            <span class="text">{{ ref.title }}</span>
          </div>
          <div class="reference-content">
            {{ truncateText(ref.content) }}
          </div>
          <div class="reference-url">
            <Icon name="link" />
            <span>{{ simplifyUrl(ref.url) }}</span>
            <Icon name="arrow" class="arrow-icon" />
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.reference-popup-container {
  border-radius: 16px 16px 0 0;
}

.reference-popup {
  padding: 0 16px;

  .reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;

    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .close-btn {
      padding: 8px;
      border-radius: 50%;
      color: #999;

      &:active {
        background-color: #f5f5f5;
      }
    }
  }

  .reference-list {
    .reference-item {
      padding: 16px;
      margin-bottom: 12px;
      border-radius: 12px;
      background-color: #f8f9fa;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;

      &:last-child {
        margin-bottom: 20px;
      }

      &:active {
        transform: scale(0.99);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      }

      .reference-title {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 16px;
        display: flex;
        gap: 12px;

        .index {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          background-color: #4080ff;
          color: white;
          border-radius: 50%;
          font-size: 14px;
        }

        .text {
          color: #333;
          flex: 1;
        }
      }

      .reference-content {
        color: #666;
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .reference-url {
        color: #999;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding-top: 8px;
        border-top: 1px dashed #eee;

        .arrow-icon {
          margin-left: auto;
          color: #4080ff;
        }
      }
    }
  }
}
</style>
